<template>
  <div class="todo-footer" v-show="todos.length">
    <label>
      <input type="checkbox"
             :checked="completedTotal===todos.length && todos.length>0"
             @click="isCheck"
      >
    </label>
    <span>
      <span>已完成{{completedTotal }}</span> / 全部{{todos.length}}
    </span>
    <button class="btn btn-danger" @click="clearAll">清除已完成的任务</button>
  </div>

</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "UserFooter",
  props:['todos','changeCompleted','clearAllTodo'],
  computed:{
    completedTotal(){
      let count = 0
      this.todos.forEach((item)=>{
        if(item.completed) count++
      })
      return count
    }
  },
  methods:{
    isCheck(e){
      this.changeCompleted(e.target.checked)
    },
    clearAll(){
      if(confirm('是否清除已经完成的任务？？'))    this.clearAllTodo()
    }
  }
}
</script>

<style scoped>
  .todo-footer{
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 9px;
  }
  .todo-footer label{
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }
  .todo-footer label input{
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .todo-footer button{
    float: right;
    margin-top: 5px;
  }

</style>